<!-- 作息时间编辑弹窗 -->
<template>
  <el-dialog
      :title="isUpdate?'修改作息时间':'添加作息时间'"
      :visible="visible"
      v-if="updateVisible"
      width="850px"
      :destroy-on-close="true"
      :lock-scroll="false"
      :close-on-click-modal="false"
      @update:visible="updateVisible">
    <el-form
        ref="form"
        :model="form"
        :rules="rules"
        label-width="100px">
      <el-row :gutter="15">
        <el-col :span="8">
          <el-form-item label="所属学校:" prop="organization">
            <el-select
                filterable
                clearable
                v-model="form.organization"
                @change="changeGradeList"
                size="small"
                placeholder="-请选择所属学校-"
                class="ele-block">
              <el-option v-for="item in schoolList" :key="item.id" :label="item.name" :value="item.id"/>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="所属年级:" prop="grade">
            <el-select
                filterable
                clearable
                v-model="form.grade"
                @change="changeSemesterList"
                size="small"
                placeholder="-请选择年级-"
                class="ele-block">
              <el-option v-for="item in gradeList" :key="item.id" :label="item.name" :value="item.id"/>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="所属学期:" prop="semester">
            <el-select
                filterable
                clearable
                v-model="form.semester"
                @change="$forceUpdate()"
                size="small"
                placeholder="-请选择学期-"
                class="ele-block">
              <el-option v-for="item in semesterList" :key="item.id" :label="item.name" :value="item.id"/>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="15">
        <el-form-item
            label="作息名称:"
            prop="name">
          <el-input
              :maxlength="20"
              v-model="form.name"
              placeholder="请输入作息名称"
              clearable/>
        </el-form-item>
      </el-row>
      <el-row :gutter="15">
        <el-col :span="8">
          <el-form-item label="是否早自习:" prop="isearly">
            <el-select
                v-model="form.isearly"
                @change="setKaoqing">
              <el-option v-for="(item, index) in zaowan" :key="index" :label="item" :value="index"/>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="上午:" ref="shang" prop="shang">
            <el-select v-model="form.shang"
                       @change="setKaoqing">
              <el-option v-for="(item, index) in zhong" :key="index" :label="item" :value="index"/>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="下午:" ref="xia" prop="xia">
            <el-select v-model="form.xia"
                       @change="setKaoqing">
              <el-option v-for="(item, index) in zhong" :key="index" :label="item" :value="index"/>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="晚上:" ref="wan" prop="wan">
            <el-select v-model="form.wan"
                       @change="setKaoqing">
              <el-option v-for="(item, index) in zhong" :key="index" :label="item" :value="index"/>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="是否晚自习:" prop="isevening">
            <el-select
                v-model="form.isevening"
                @change="setKaoqing">
              <el-option v-for="(item, index) in zaowan" :key="index" :label="item" :value="index"/>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <div style="margin: 6px 0 5px 0;">
        <el-header style="height: 30px;">节次设置</el-header>
      </div>
      <el-row :gutter="15" justify="center" align="middle" style="height: 2vw;">
        <el-col style="text-align: center;" :span="5">
          时段
        </el-col>
        <el-col style="text-align: center;" :span="6">
          节次
        </el-col>
        <el-col style="text-align: center;" :span="13">
          打卡时间范围
        </el-col>
      </el-row>
      <el-row :gutter="15" justify="center" align="middle" v-if="ruleForms.zaozi>0">
        <el-col style="text-align: center;" :span="5">早上</el-col>
        <el-col style="text-align: center;" :span="6">早自习</el-col>
        <el-col style="text-align: center; display: flex; justify-content: center;" :span="13">
<!--          <el-time-picker-->
<!--              required="true"-->
<!--              is-range-->
<!--              :editable="false"-->
<!--              v-model="ruleForms.zaozitime"-->
<!--              format="HH:mm"-->
<!--              value-format="HH:mm"-->
<!--              range-separator="至"-->
<!--              start-placeholder="开始时间"-->
<!--              end-placeholder="结束时间"-->
<!--              placeholder="选择时间范围">-->
<!--          </el-time-picker>-->
          <el-time-select placeholder="开始时间" v-model="ruleForms.zaozitime[0]" style="width: 120px" :picker-options="{step: '00:05', start: '05:00', end: '23:00'}">
          </el-time-select>
          <el-time-select placeholder="结束时间" v-model="ruleForms.zaozitime[1]" style="width: 120px" :picker-options="{step: '00:05', start: '05:00', end: '23:00',minTime: ruleForms.zaozitime[0]}">
          </el-time-select>
        </el-col>
      </el-row>
      <el-row :gutter="15" justify="center" align="middle"
              v-for="(item1, index1) in shang"
              :key="index1">
        <el-col style="text-align: center;" :span="5">上午</el-col>
        <el-col style="text-align: center;" :span="6">第{{ index1 + 1 }}节</el-col>
        <el-col style="text-align: center;" :span="13">
<!--          <el-time-picker-->
<!--              is-range-->
<!--              :editable="false"-->
<!--              v-model="ruleForms.shang[index1]"-->
<!--              format="HH:mm"-->
<!--              value-format="HH:mm"-->
<!--              range-separator="至"-->
<!--              start-placeholder="开始时间"-->
<!--              end-placeholder="结束时间"-->
<!--              placeholder="选择时间范围">-->
<!--          </el-time-picker>-->
          <el-time-select placeholder="开始时间" v-model="ruleForms.shang[index1][0]" style="width: 120px" :picker-options="{step: '00:05', start: '05:00', end: '23:00'}">
          </el-time-select>
          <el-time-select placeholder="结束时间" v-model="ruleForms.shang[index1][1]" style="width: 120px" :picker-options="{step: '00:05', start: '05:00', end: '23:00',minTime: ruleForms.shang[index1][0]}">
          </el-time-select>
        </el-col>
      </el-row>
      <el-row :gutter="15" justify="center" align="middle"
              v-for="(item2, index2) in xia"
              :key="index2">
        <el-col style="text-align: center;" :span="5">下午</el-col>
        <el-col style="text-align: center;" :span="6">第{{ index2 + 1 }}节</el-col>
        <el-col style="text-align: center;" :span="13">
<!--          <el-time-picker-->
<!--              is-range-->
<!--              :editable="false"-->
<!--              v-model="ruleForms.xia[index2]"-->
<!--              format="HH:mm"-->
<!--              value-format="HH:mm"-->
<!--              range-separator="至"-->
<!--              start-placeholder="开始时间"-->
<!--              end-placeholder="结束时间"-->
<!--              placeholder="选择时间范围">-->
<!--          </el-time-picker>-->
          <el-time-select placeholder="开始时间" v-model="ruleForms.xia[index2][0]" style="width: 120px" :picker-options="{step: '00:05', start: '05:00', end: '23:00'}">
          </el-time-select>
          <el-time-select placeholder="结束时间" v-model="ruleForms.xia[index2][1]" style="width: 120px" :picker-options="{step: '00:05', start: '05:00', end: '23:00',minTime: ruleForms.xia[index2][0]}">
          </el-time-select>
        </el-col>
      </el-row>
      <el-row :gutter="15" justify="center" align="middle"
              v-for="(item3, index3) in wan"
              :key="index3">
        <el-col style="text-align: center;" :span="5">晚上</el-col>
        <el-col style="text-align: center;" :span="6">第{{ index3 + 1 }}节</el-col>
        <el-col style="text-align: center;" :span="13">
<!--          <el-time-picker-->
<!--              is-range-->
<!--              :editable="false"-->
<!--              v-model="ruleForms.wan[index3]"-->
<!--              format="HH:mm"-->
<!--              value-format="HH:mm"-->
<!--              range-separator="至"-->
<!--              start-placeholder="开始时间"-->
<!--              end-placeholder="结束时间"-->
<!--              placeholder="选择时间范围">-->
<!--          </el-time-picker>-->
          <el-time-select placeholder="开始时间" v-model="ruleForms.wan[index3][0]" style="width: 120px" :picker-options="{step: '00:05', start: '05:00', end: '23:00'}">
          </el-time-select>
          <el-time-select placeholder="结束时间" v-model="ruleForms.wan[index3][1]" style="width: 120px" :picker-options="{step: '00:05', start: '05:00', end: '23:00',minTime: ruleForms.wan[index3][0]}">
          </el-time-select>
        </el-col>
      </el-row>
      <el-row :gutter="15" justify="center" align="middle" v-if="ruleForms.wanzi>0">
        <el-col style="text-align: center;" :span="5">晚上</el-col>
        <el-col style="text-align: center;" :span="6">晚自习</el-col>
        <el-col style="text-align: center;" :span="13">
<!--          <el-time-picker-->
<!--              is-range-->
<!--              :editable="false"-->
<!--              v-model="ruleForms.wanzitime"-->
<!--              format="HH:mm"-->
<!--              value-format="HH:mm"-->
<!--              range-separator="至"-->
<!--              start-placeholder="开始时间"-->
<!--              end-placeholder="结束时间"-->
<!--              placeholder="选择时间范围">-->
<!--          </el-time-picker>-->
          <el-time-select placeholder="开始时间" v-model="ruleForms.wanzitime[0]" style="width: 120px" :picker-options="{step: '00:05', start: '05:00', end: '23:00'}">
          </el-time-select>
          <el-time-select placeholder="结束时间" v-model="ruleForms.wanzitime[1]" style="width: 120px" :picker-options="{step: '00:05', start: '05:00', end: '23:00',minTime: ruleForms.wanzitime[0]}">
          </el-time-select>
        </el-col>
      </el-row>
      <el-row :gutter="15" style="margin-top: 20px;">
        <el-form-item label="显示顺序:" prop="sort">
          <el-input-number
              :min="0"
              v-model="form.sort"
              placeholder="请输入显示顺序"
              controls-position="right"
              class="ele-fluid ele-text-left"/>
        </el-form-item>
      </el-row>
      <el-form-item label="备注:">
        <el-input
            :rows="3"
            clearable
            type="textarea"
            :maxlength="200"
            v-model="form.note"
            placeholder="请输入备注"/>
      </el-form-item>
    </el-form>
    <div slot="footer">
      <el-button @click="updateVisible(false)">取消</el-button>
      <el-button
          type="primary"
          @click="save"
          :loading="loading">保存
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
// import uploadImage from '@/components/uploadImage'

export default {
  name: 'WorkandrestEdit',
  props: {
    // 弹窗是否打开
    visible: Boolean,
    // 修改回显的数据
    data: Object
  },
  components: {},
  data() {
    return {
      // 表单数据
      form: Object.assign({}, this.data),
      // 表单验证规则
      rules: {
        organization: [
          {required: true, message: '请输入所属学校', trigger: 'blur'}
        ],
        grade: [
          {required: true, message: '请输入所属年级', trigger: 'blur'}
        ],
        semester: [
          {required: true, message: '请输入学期', trigger: 'blur'}
        ],
        name: [
          {required: true, message: '请输入作息表名称', trigger: 'blur'}
        ],
        isearly: [
          {required: true, message: '请选择是否早自习', trigger: 'blur'}
        ],
        isevening: [
          {required: true, message: '请选择是否晚自习', trigger: 'blur'}
        ],
        data: [
          {required: true, message: '请输入节次设置数据', trigger: 'blur'}
        ],
        sort: [
          {required: true, message: '请输入显示顺序', trigger: 'blur'}
        ],
        note: [
          {required: true, message: '请输入备注', trigger: 'blur'}
        ],
      },
      // 提交状态
      loading: false,
      // 是否是修改
      isUpdate: false,
      // 学院列表
      schoolList: [],
      // 年级列表
      gradeList: [],
      // 学期列表
      semesterList: [],
      zaowan: ['无', '有'],
      zhong: ['无', '1', '2', '3', '4', '5', '6'],
      ruleForms: {zaozi: '',zaozitime: ['', ''], shang: [], xia: [], wan: [], wanzi: '', wanzitime: ['', '']},
      shang: [],
      xia: [],
      wan: [],
    };
  },
  watch: {
    data() {
      if (this.data) {
        this.form = Object.assign({}, this.data);
        if (this.data.data) {
          this.ruleForms = this.data.data;
          if(!this.ruleForms.zaozitime){
            this.ruleForms.zaozitime = ['',''];
          }
          if(!this.ruleForms.wanzitime){
            this.ruleForms.wanzitime = ['',''];
          }
          if(!this.ruleForms.shang){
            this.ruleForms.shang = [];
          }
          if(!this.ruleForms.xia){
            this.ruleForms.xia = [];
          }
          if(!this.ruleForms.wan){
            this.ruleForms.wan = [];
          }
          this.shang = this.ruleForms.shang;
          this.xia = this.ruleForms.xia;
          this.wan = this.ruleForms.wan;
        } else {
          this.ruleForms = {zaozi: '',zaozitime: ['', ''], shang: [], xia: [], wan: [], wanzi: '', wanzitime: ['', '']};
          this.shang = [];
          this.xia = [];
          this.wan = [];
        }
        // 获取学院列表
        this.getSchoolList();
        this.isUpdate = true;
      } else {
        this.form = {};
        this.ruleForms = {zaozi: '',zaozitime: ['', ''], shang: [], xia: [], wan: [], wanzi: '', wanzitime: ['', '']};
        this.shang = [];
        this.xia = [];
        this.wan = [];
        this.isUpdate = false;
      }
    },
    immediate: true,
    deep: true
  },
  mounted() {
    // 获取学院列表
    this.getSchoolList();
    // 获取负责人列表
    // this.getGradeList();
    // 获取学期列表
    // this.getSemesterList();
  },
  methods: {
    /* 保存编辑 */
    save() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          this.loading = true;
          this.form.data = JSON.stringify(this.ruleForms);
          this.$http.post('/workandrest/edit', this.form).then(res => {
            this.loading = false;
            if (res.data.code === 0) {
              this.$message.success(res.data.msg);
              if (!this.isUpdate) {
                this.form = {};
              }
              this.updateVisible(false);
              this.$emit('done');
            } else {
              this.$message.error(res.data.msg);
            }
          }).catch(e => {
            this.loading = false;
            this.$message.error(e.message);
          });
        } else {
          return false;
        }
      });
    },
    /* 更新visible */
    updateVisible(value) {
      this.ruleForms = {zaozi: '', shang: [], xia: [], wan: [], wanzi: ''};
      this.shang = [];
      this.xia = [];
      this.wan = [];
      this.$emit('update:visible', value);
      this.$emit('done');
    },
    /**
     * 获取组织列表
     */
    getSchoolList() {
      if (this.form.organization) {
        // this.form.superior = null;
        this.$forceUpdate();
        this.getGradeList();
      }
      this.$http.get('/school/getSchoolList').then(res => {
        if (res.data.code === 0) {
          this.schoolList = res.data.data;
        } else {
          this.$message.error(res.data.msg);
        }
      }).catch(e => {
        this.$message.error(e.message);
      });
    },

    /**
     * 获取年级列表
     */
    getGradeList() {
      if (this.form.grade) {
        // this.form.grade = null;
        this.$forceUpdate();
        this.getSemesterList();
      }
      this.$http.post('/grade/getGradeList', {oid: this.form.organization}).then(res => {
        if (res.data.code === 0) {
          this.gradeList = res.data.data;
        } else {
          this.$message.error(res.data.msg);
        }
      }).catch(e => {
        this.$message.error(e.message);
      });
    },
    /**
     * 获取年级列表
     */
    changeGradeList() {
      this.form.grade = null;
      this.getGradeList();
    },
    /**
     * 获取学期列表
     */
    getSemesterList() {
      if (this.form.semester) {
        // this.form.grade = null;
        this.$forceUpdate();
      }
      // this.$forceUpdate();
      // this.getSemesterList();
      this.$http.post('/semester/getSemesterList', {gid: this.form.grade}).then(res => {
        if (res.data.code === 0) {
          this.semesterList = res.data.data;

        } else {
          this.$message.error(res.data.msg);
        }
      }).catch(e => {
        this.$message.error(e.message);
      });
    },
    /**
     * 获取学期列表
     */
    changeSemesterList() {
      this.form.semester = null;
      this.getSemesterList();
    },
    /**
     * 获取学期列表
     */
    setKaoqing() {
      this.ruleForms.zaozi = this.form.isearly;
      var sarr = [];
      var timeArr = [];
      var j = 0;
      if (this.form.shang >= 0) {
        sarr = [];
        timeArr = [];
        for (j = 0; j < this.form.shang; j++) {
          sarr[j] = '';
          timeArr[j] = ['', ''];
        }
        this.$set(this.ruleForms, 'shang', timeArr)
        this.shang = sarr;
      }
      if (this.form.xia >= 0) {
        sarr = [];
        timeArr = [];
        for (j = 0; j < this.form.xia; j++) {
          sarr[j] = '';
          timeArr[j] = ['', ''];
        }
        this.$set(this.ruleForms, 'xia', timeArr)
        this.xia = sarr;
      }
      if (this.form.wan >= 0) {
        sarr = [];
        timeArr = [];
        for (j = 0; j < this.form.wan; j++) {
          sarr[j] = '';
          timeArr[j] = ['', ''];
        }
        this.wan = sarr;
        this.$set(this.ruleForms, 'wan', timeArr)
      }

      this.ruleForms.wanzi = this.form.isevening;
    },
  }
}
</script>

<style scoped>
</style>
